import React, { useState, useEffect, useContext } from 'react';
import PubSub from 'pubsub-js';
import { componentType, componentList } from '../../../api/component/data.js';
import {
  Button,
  Drawer,
  Form,
  Row,
  Col,
  Input,
  Radio,
  Select,
  message,
} from 'antd';
import { editComponent } from '../../../api/component/index';
const Option = Select.Option;
function UpdateNetworkComponent() {
  let initData;
  const [updateForm] = Form.useForm();
  const [isUpdate, setIsUpdate] = useState(false);
  const [isUpdateId, setIsUpdateId] = useState('');

  const onClose = () => {
    setIsUpdate(false);
  };
  const onUpdatelog = (values) => {
    values['state'] = isUpdateId['state'];
    let updateResult = editComponent(isUpdateId['id'], values);
    updateResult.then((item) => {
      message.success(item['msg']);
      //发布消息---------------------------------------------reset2
      PubSub.publish('reset2', true);
    });
    onClose();
  };
  const options = () => {
    let optionList = [];
    for (let i = 0; i < componentType.length; i++) {
      optionList.push(
        <Option value={componentType[i]['id']}>
          {componentType[i]['name']}
        </Option>
      );
    }
    return optionList;
  };

  useEffect(() => {
    PubSub.unsubscribe('isUpdateCard');
    PubSub.subscribe('isUpdateCard', (msg, data) => {
      setIsUpdate(data['state']);
    });
    PubSub.unsubscribe('isUpdateCardId');
    PubSub.subscribe('isUpdateCardId', (msg, data) => {
      initData = componentList.filter((item) => {
        return item['id'] === data['id'];
      })[0];
      setIsUpdateId(initData);
    });
    updateForm.resetFields();
  });

  return (
    <Drawer
      title="编辑网络组件"
      placement="right"
      onClose={onClose}
      visible={isUpdate}
      width={420}
      footer={
        <>
          <Button
            onClick={() => {
              onClose();
            }}
            style={{ borderRadius: '4px', marginRight: '10px' }}
          >
            关闭
          </Button>
          <Button
            htmlType="submit"
            style={{ borderRadius: '4px' }}
            type="primary"
            onClick={() => {
              updateForm.submit();
            }}
          >
            保存
          </Button>
        </>
      }
      footerStyle={{ textAlign: 'right' }}
    >
      <Form
        form={updateForm}
        colon={false}
        onFinish={onUpdatelog}
        initialValues={{
          type: isUpdateId['type'],
          name: isUpdateId['name'],
          shareCluster: isUpdateId['shareCluster'],
        }}
      >
        <Row gutter={[16]}>
          <Col span={24}>
            <Form.Item
              name="name"
              label="组件名称"
              rules={[{ required: true, message: '请输入组件名称' }]}
            >
              <Input defaultValue={isUpdateId['name']} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              name="type"
              label="组件类型"
              rules={[{ required: true }]} 
            >
              <Select disabled defaultValue={isUpdateId['type']}>
                {options()}
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              name="shareCluster"
              label="集群"
              rules={[{ required: true, message: '请选择集群' }]}
            >
              <Radio.Group defaultValue={isUpdateId['shareCluster']}>
                <Radio value={true}>共享配置</Radio>
                <Radio value={false}>独立配置</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Drawer>
  );
}
export default UpdateNetworkComponent;
